<template>
    <div class="ps-numbox">
        <!--数字输入框-->
        <button class="ps-btn ps-btn-numbox-minus" type="button" @click="decrementNumber">-</button>
        <input class="ps-input-numbox" type="number" v-model="currNum">
        <button class="ps-btn ps-btn-numbox-plus" type="button" @click="incrementNumber">+</button>
    </div>
</template>
<script>
    export default{
        props: {
            minNum: {
                type: Number,
                default: 1
            },
            maxNum: {
                type: Number,
                default: 1000000
            },
            steps: {
                type: Number,
                default: 1
            }
        },
        data(){
            return{
                currNum: 1
            }
        },
        computed:{

        },
        methods:{
            incrementNumber() {
                this.currNum += this.steps;
                this.currNum = this.currNum >= this.maxNum ? this.maxNum : this.currNum;
                this.$emit('numberBoxControl',this.currNum);
            },
            decrementNumber() {
                this.currNum -= this.steps;
                this.currNum = this.currNum <= this.minNum ? this.minNum : this.currNum;
                this.$emit('numberBoxControl',this.currNum);
            }
        },
        mounted(){

        }
    }
</script>
<style lang="less" scoped>
    .ps-numbox {
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 120px;
        height: 35px;
        vertical-align: middle;
        border: solid 1px #bbb;
        border-radius: 3px;
        background-color: #efeff4;
    }
    .ps-btn{
        padding: 0;
        position: absolute;
        top:0;
        z-index:1;
        width: 40px;
        text-align: center;
        height: 35px;
        line-height: 35px;
        border-radius: 0;
        background-color: #f9f9f9;
        font-weight: 400;
        color: #555;
        &:active{
            background-color: #ccc;
        }
    }
    .ps-btn-numbox-minus{
        left: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-right: solid 1px #ccc!important;
    }
    .ps-btn-numbox-plus{
        right: 0;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-left: solid 1px #ccc!important;
    }
    .ps-input-numbox{
        display: inline-block;
        overflow: hidden;
        width: 100%!important;
        height: 100%;
        margin: 0;
        padding: 0 3px!important;
        text-align: center;
        text-overflow: ellipsis;
        word-break: normal;
        border: none!important;
        border-radius: 0!important;
    }
</style>
